<template>
  <v-chart :option="option" autoresize />
</template>

<script setup>
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { BarChart } from "echarts/charts";
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
} from "echarts/components";
import VChart, { THEME_KEY } from "vue-echarts";
import { ref, provide, computed } from "vue";
import { primaryColor, secondaryColor } from "../color";
import { rand } from "@vueuse/core";
import dayjs from "dayjs";

use([
  CanvasRenderer,
  BarChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
]);

provide(THEME_KEY, "dark");

const color = {
  type: "linear",
  x: 0,
  y: 0,
  x2: 0,
  y2: 1,
  colorStops: [
    {
      offset: 0,
      color: secondaryColor,
    },
    {
      offset: 1,
      color: primaryColor,
    },
  ],
};
const option = computed(() => {
  const op = {
    backgroundColor: "rgba(0,0,0,0)",
    title: {
      text: "微突发历史趋势",
      textStyle: {
        fontSize: 16,
      },
      right: "15%",
    },
    grid: {
      bottom: "0%",
      top: "10%",
      right: "18%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      data: Array(12).fill(0).map((v, i) => i + 1 + '月'),
      boundaryGap: true,
    },
    yAxis: {
      type: "value",
      splitLine: {
        show: false,
      },
    },
    series: [
      {
        data: Array(12).fill(0).map((v, i) => {
          if (dayjs().month() < i) return 0
          else return rand(100, 3000)
        }),
        type: "bar",
        itemStyle: {
          color,
        },
      },
    ],
  };
  return op;
});
</script>
